<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="../js/wap_meta.js" ></script>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.1.1.js" ></script>
		<link rel="stylesheet" href="../css/base.css" />
		<script type="text/javascript" src="../js/link.js" ></script>
		<script type="text/javascript" src="../js/jquery.cookie.js" ></script>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
			font-family: "微软雅黑";
		}
		
		body {
			background: #f0f0f0;
		}
		.title p{
			width: 750px;
			text-align: center;
			font-size: 34px;
			color: #004591;
			padding-top: 26px;
		}
		.back{
			position: absolute;
			top: 30px;
			left: 30px;
		}
		.littleTitle{
			position: absolute;
			width: 750px;
			text-align: center;
			top: 130px;
			font-size: 32px;
			color: #0b52a1;
		}
		.content{
			position: absolute;
			top: 200px;
			padding-bottom: 100px;
		}
		.bar{
			position: relative;
			height: 90px;
		}
		.bar p{
			padding-top: 15px;
			padding-left: 30px;
			font-size: 32px;
			color: #333333;
		}
		.right{
			position: absolute;
			left: 240px;
			top: 15px;
		}
		.right input{
			font-size: 32px;
			color: #999999;
			border: 0;
			background: 0;
			width: 500px;
		}
		.line{
			position: absolute;
			left: 30px;
			width: 720px;
			top: 78px;
			height: 1px;
			background: #d0d0d0;
		}
		.sanjiao{
			position: absolute;
			left: 680px;
			top: 30px;
		}
		.comform{
			position: absolute;
			left: 30px;
			bottom: 100px;
		}
		select{
			width: 510px;
			height: 44px;
			font-size: 32px;
			color: #999999;
			border: 0;
			background: 0;
		}
	</style>
	<body>
		<div class="title">
			<p>公益护照申领</p>
			<img class="back" src="../img/activate/back.png" />
		</div>
		<div class="littleTitle">预约信息</div>
		<div class="content">
			<form id="searchForm">
				<div class="bar" style="display: none;">
					<div class="left">
						<p>省份<font color='#FF3939'>*</font></p>
					</div>
					<img class="sanjiao" src="../img/apply/sanjiao.png" />
					<div class="right">
                        <select id="province">
                            <option selected value="0">身份证</option>
                            <option value="1">军官证</option>
                            <option value="2">护照</option>
                        </select>
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>城市<font color='#FF3939'>*</font></p>
					</div>
					<img class="sanjiao" src="../img/apply/sanjiao.png" />
					<div class="right">
                        <select id="city">
                            <option selected value="0">身份证</option>
                            <option value="1">军官证</option>
                            <option value="2">护照</option>
                        </select>
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>区县<font color='#FF3939'>*</font></p>
					</div>
					<img class="sanjiao" src="../img/apply/sanjiao.png" />
					<div class="right">
                        <select id="district">
                            <option selected value="0">身份证</option>
                            <option value="1">军官证</option>
                            <option value="2">护照</option>
                        </select>
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>申领基地<font color='#FF3939'>*</font></p>
					</div>
					<img class="sanjiao" src="../img/apply/sanjiao.png" />
					<div class="right">
                        <select id="basement">
                        </select>
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>申领日期<font color='#FF3939'>*</font></p>
					</div>
					<img class="sanjiao" src="../img/apply/sanjiao.png" />
					<div class="right">
                        <select id="date">
                        </select>
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>申领时间<font color='#FF3939'>*</font></p>
					</div>
					<img class="sanjiao" src="../img/apply/sanjiao.png" />
					<div class="right">
                        <select id="time">
                        </select>
					</div>
					<div class="line"></div>
				</div>
			</form>
		</div>
		<img class="comform" src="../img/activate/next.png" />
		<script>
			var provinceArr = [];
			var cityArr = [];
			var districtArr = [];
			
			var tempdistrictArr = [];
			
			var dateArr = [];
			
			$("#province").empty();
			$("#city").empty();
			$("#district").empty();
			$("#basement").empty();
			$("#date").empty();
			$("#time").empty();
//			获取省市
			$.get(linkObj.getCity,function(data){
				if(data.code == 0){
					provinceArr = data.data.p;
					cityArr = data.data.c;
					districtArr = data.data.d;
					
					for(var pi = 0; pi < provinceArr.length; pi++)
					{
						if(provinceArr[pi].name.split("上海").length == 2){
							var option = $("<option>").val(provinceArr[pi].code).text(provinceArr[pi].name);
							$("#city").append(option);
							for (var ci = 0; ci < districtArr.length; ci++) {
								if(provinceArr[pi].code == districtArr[ci][3].substring(0,3)){
									var option = $("<option>").val(districtArr[ci][2]).text(districtArr[ci][2]);
									$("#district").append(option);
								}
							}
						}
					}
					$.get(linkObj.getBase + "?district="+$("#district").children('option:selected').val(),function(data){
						if(data.code == 0){
							for(var pi = 0; pi < data.data.length; pi++)
							{
								var option = $("<option>").val(data.data[pi].id).text(data.data[pi].name);
								$("#basement").append(option);
							}
							$.get(linkObj.getTime + "?baseAddressId=" + $("#basement").children('option:selected').val(),function(data){
								if(data.code == 0){
									dateArr = data.data;
									dateArr.sort(sortNumber);
									for(var pi = 0; pi < dateArr.length; pi++)
									{
										var option = $("<option>").val(data.data[pi].day).text(data.data[pi].day);
										$("#date").append(option);
									}
									for(var pi = 0; pi < dateArr[0].times.length; pi++)
									{
										var option = $("<option>").val(data.data[0].times[pi]).text(data.data[0].times[pi]);
										$("#time").append(option);
									}
								}else{
									alert(data.message);
								}
							},'json')
						}else{
							alert(data.message);
						}
					},'json')
				}else{
					alert(data.message);
				}
				
			},'json')
			
			$('#district').change(function() {
				$("#basement").empty();
				$("#date").empty();
				$("#time").empty();
				$.get(linkObj.getBase + "?district="+$(this).children('option:selected').val(),function(data){
					if(data.code == 0){
						for(var pi = 0; pi < data.data.length; pi++)
						{
							var option = $("<option>").val(data.data[pi].id).text(data.data[pi].name);
							$("#basement").append(option);
						}
						$.get(linkObj.getTime + "?baseAddressId=" + $("#basement").children('option:selected').val(),function(data){
							if(data.code == 0){
								dateArr = data.data;
								dateArr.sort(sortNumber);
								for(var pi = 0; pi < dateArr.length; pi++)
								{
									var option = $("<option>").val(data.data[pi].day).text(data.data[pi].day);
									$("#date").append(option);
								}
								for(var pi = 0; pi < dateArr[0].times.length; pi++)
								{
									var option = $("<option>").val(data.data[0].times[pi]).text(data.data[0].times[pi]);
									$("#time").append(option);
								}
							}
						},'json')
					}else{
						alert(data.message);
					}
				},'json')
			})
			
			
			$('#basement').change(function() {
				$("#date").empty();
				$("#time").empty();
				$.get(linkObj.getTime + "?baseAddressId=" +$(this).children('option:selected').val(),function(data){
					if(data.code == 0){
						dateArr = data.data;
						dateArr.sort(sortNumber);
						for(var pi = 0; pi < dateArr.length; pi++)
						{
							var option = $("<option>").val(data.data[pi].day).text(data.data[pi].day);
							$("#date").append(option);
						}
						for(var pi = 0; pi < dateArr[0].times.length; pi++)
						{
							var option = $("<option>").val(data.data[0].times[pi]).text(data.data[0].times[pi]);
							$("#time").append(option);
						}
					}else{
						alert(data.message);
					}
				},'json')
			})
			$('#date').change(function() {
				$("#time").empty();
				for(var pi = 0; pi < dateArr.length; pi++)
				{
					if(dateArr[pi].day == $(this).children('option:selected').val()){
						for(var c = 0; c < dateArr[pi].times.length; c++)
						{
							var option = $("<option>").val(dateArr[pi].times[c]).text(dateArr[pi].times[c]);
							$("#time").append(option);
						}
					}
				}
				
			})
			
			
			
			$(".comform").click(function(){
				if(!$("#basement").children('option:selected').val()) {
					alert("请选择申领基地");
					return;
				}
				if(!$("#date").children('option:selected').val()) {
					alert("请选择申领日期");
					return;
				}
				if(!$("#time").children('option:selected').val()) {
					alert("请选择申领时间");
					return;
				}
				
				var obj = new Object();
//				obj.applyType = $("#city").children('option:selected').val();
//				obj.applyType = $("#district").children('option:selected').val();
				obj.bassAddressId = $("#basement").children('option:selected').val();
				obj.appointmenDate = $("#date").children('option:selected').val();
				obj.appointmentTime = $("#time").children('option:selected').val();
				
				
				obj.step = 3;
				obj.sn = $.cookie("sn");
				
				var encoded = JSON.stringify(obj);  
			    var jsonStr = encoded;  
				
				$.ajax({
					url: linkObj.apply,
					type: "post",
			        dataType : 'json',
					data: JSON.stringify(obj),
        			contentType: "application/json",  
					success: function(data) {
						if(data.code == 0) {
							$.cookie("orderNum",data.data.orderNum);
							$.cookie("realName",data.data.realName);
							$.cookie("cardNO",data.data.cardNO);
							$.cookie("bassAddressId",data.data.bassAddressId);
							document.location = "result.html";
						} else {
							alert(data.message)
						}
					}
				});
			})
			$(".back").click(function(){
				javascript:history.go(-1);
			})
			function sortNumber(a1, b1)
			{
				var a = a1.day;
				var b = b1.day;
				if(a.split("-")[0] == b.split("-")[0]){
					if(a.split("-")[1] == b.split("-")[1]){
						return a.split("-")[2] - b.split("-")[2]
					}else{
						return a.split("-")[1] - b.split("-")[1]
					}
				}else{
					return a.split("-")[0] - b.split("-")[0]
				}
			}
		</script>
	</body>
</html>
